<template>
	<view class="container">
		<uni-nav-bar title="聊天列表" @clickLeft="goHome" left-icon="left" backgroundColor="#fff" color="#000"
			statusBar="true"></uni-nav-bar>
			
		<view class="content">
			<scroll-view class="scrollView" scroll-y="true" :style="{height: setcollapseheight() - 10 + 'px'}">
				<view class="item" v-for="(item,index) in dataList" :key="index" @click="goChat(item)">
					<view class="left">
						<view class="pic">
							<image src="@/static/socialized-service/nz/person.png" mode="widthFix"></image>
							<view v-if="item.unReadCount" class="unReadCount">{{ item.unReadCount }}</view>
						</view>
						<view class="nickName">
							<view class="name">
								{{item.customUserName}}
							</view>
						</view>
						<view v-if="item.chatOrderStatus == 0" class="finish" @click.stop="finish(item)">
							服务完成
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<!-- <u-popup class="pop" :show="showApply" mode="center" width="100%" height="100%" @close="showApply=false">
			<view class="popTop">
				{{otherName}}向您申请咨询，请问您是否同意？
			</view>
			<view class="operate">
				<u-button class="btn1" @click="confirm" size="mini" text="同意"></u-button>
				<u-button class="btn2" @click="unConfirm" size="mini" text="不同意"></u-button>
			</view>
		</u-popup> -->
		
		<bottomTabar></bottomTabar>
	</view>

</template>

<script>
	import chartApi from '@/api/socialized-servce/specialist-consultation/chart/index.js'
	import bottomTabar from '../../components/bottom-tabar/index.vue'
	export default {
		components: {
			bottomTabar
		},
		data() {
			return {
				showApply: false,
				dataList: [],
				otherId: '',
				otherName: '',
				userId: uni.getStorageSync('userId'),
				socketTask: null,
			}
		},
		mounted() {
			this.getNowChatPerson()
			this.showApply = false
			uni.$on('expertList', (res) => {
				this.otherId = res.data.to
				this.showApply = true
			})
			// 用户向专家新发消息
			uni.$on('update', (from) => {
				this.otherId = from
				this.getNowChatPerson()
			})
			uni.$on('WSMSG', (data) => {
				let params = JSON.parse(data.data)
				if (params.type === 2) {
					let index = this.dataList.findIndex(el => {
						return el.customUserId == params.data.from;
					});
					if (index != -1) {
						let co = this.dataList[index].unReadCount || 0;
						this.dataList[index].unReadCount = co + 1;
						this.dataList[index].content = params.data.content;
						this.dataList.unshift(this.dataList[index]);
						this.dataList.splice(index + 1, 1);
					}
				}
			})
		},
		methods: {
			async getNowChatPerson() {
				let res = await chartApi.queryExpertServiceList({
					page: 1,
					size: 100,
					condition: {
						serviceProviderNo: uni.getStorageSync('serviceProviderNo')
					}
				})
				if (res.code === 200) {
					this.dataList = res.data.content
				} else {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					})
				}
			},
			goHome() {
				uni.reLaunch({
					url: '/pages/socialized-service/selection-system/selection-system'
				})
			},
			scrollView() {
				if (this.tabIndex === 0) {
					if (this.total > this.myPostList.length) {

					} else {
						console.log('触底');
						return
					}
				} else {
					if (this.total > this.myPostList.length) {
						this.page++
						this.getResolvePost()
					} else {
						console.log('触底');
						return
					}
				}
			},
			onPullDownRefresh() {
				this.getNowChatPerson()
				setTimeout(function() {
					uni.stopPullDownRefresh()
				}, 1000)
			},
			setcollapseheight() {
				let winHeight = 0
				let topheightone = uni.upx2px(136)
				uni.getSystemInfo({
					success: function(res) {
						winHeight = res.windowHeight
					}
				})
				let oldHeight = uni.upx2px(136)
				winHeight = parseInt(winHeight) - topheightone - oldHeight
				// #ifndef H5
				winHeight = winHeight - 10
				// #endif
				return winHeight
			},
			goChat(item) {
				this.otherId = item.customUserId
				uni.redirectTo({
					url: `/subPage1/socialized-service/specialist-consultation/expert-module/online-service/chat/chat?type=expert&otherId=${this.otherId}&chatOrderId=${item.chatOrderId}&chatOrderStatus=${item.chatOrderStatus}`
				})
			},
			// confirm() {
			// 	let params = {
			// 		type: 10,
			// 		data: {
			// 			to: this.otherId
			// 		}
			// 	}
			// 	this.$socketApi.sendMsg(params)
			// 	uni.redirectTo({
			// 		url: `/subPage1/socialized-service/specialist-consultation/expert-module/online-service/chat/chat?type=expert&otherId=${this.otherId}`
			// 	})
			// },
			unConfirm() {
				let params = {
					type: 11,
					data: {
						to: this.otherId
					}
				}
				this.$socketApi.sendMsg(params)
				this.showApply = false
			},
			finish(data) {
				let that = this
				uni.showModal({
					title: '提示',
					content: `确认完成服务吗？`,
					cancelText: "取消",
					confirmText: "确认",
					success(res) {
						if (res.confirm) {
							chartApi.over(data.chatOrderId).then(res => {
								if (res.code === 200) {
									uni.showToast({
										title: res.msg,
										icon: 'none'
									})
									that.getNowChatPerson()
								} else {
									uni.showToast({
										title: res.msg,
										icon: 'none'
									})
								}
							});
						}
					}
				});
			},
		},
	}
</script>

<style lang="scss" scoped>
	.container {
		background: #F5F6FA;

		.content {
			padding: 0 40rpx;
			margin-top: 20rpx;

			.item {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding-top: 20rpx;
				height: 110rpx;
				margin-bottom: 40rpx;
				position: relative;

				.left {
					display: flex;
					align-items: center;

					.pic {
						position: relative;
						margin-right: 20rpx;
						width: 100rpx;
						height: 100rpx;
						border-radius: 50%;

						image {
							width: 100%;
							height: 100%;
						}
						.title {
							position: absolute;
							top: -20rpx;
							right: -40rpx;
							color: green;
						}
						.title1 {
							color: #000;
						}
						.red {
							color: red;
						}
						.unReadCount {
							position: absolute;
							top: -10rpx;
							right: -10rpx;
							width: 40rpx;
							height: 40rpx;
							font-size: 24rpx;
							border-radius: 50%;
							background: #f91a19;
							color: #fff;
							display: flex;
							justify-content: center;
							align-items: center;
						}
					}

					.nickName {
						display: flex;
						flex-direction: column;
						font-size: 36rpx;

						.name {
							font-weight: 700;
						}

						.replay {
							font-size: 32rpx;
							max-width: 230rpx;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
						}
					}
					
					.finish {
						position: absolute;
						right: 20rpx;
						top: 56rpx;
						color: #fff;
						background: linear-gradient(155deg, #adbdff 0%, #464ab1 100%);
						padding: 6rpx 20rpx;
						border-radius: 30rpx;
					}
				}
			}
		}
	}

	.pop {
		::v-deep.u-popup__content {
			padding: 20rpx;
		}
	}
	/deep/.u-popup__content {
		padding: 20rpx!important;
	}
	.popTop {
		margin-bottom: 20rpx;
		text-align: center;
		font-size: 36rpx;
	}
	.operate {
		margin-bottom: 10rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.btn1,
	.btn2{
		width: 132rpx!important;
		height: 48rpx!important;
		border: 2rpx solid #ccc;
	}
	.btn1 {
		margin-right: 20rpx!important;
	}
	
</style>